<template>
  <SvgIcon
    id="guide-hamburger"
    class="hamburger-container"
    color="#333"
    :icon="iconName"
    @click="handleHamburger"
  ></SvgIcon>
</template>
<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const handleHamburger = () => {
  store.commit('app/changeSliderbar')
}
const iconName = computed(() => {
  return store.getters.hamburgerOpen ? 'hamburger-opened' : 'hamburger-closed'
})
</script>
<style>
.hamburger-container {
  text-align: center;
  margin-top: 9px;
  margin-left: 11px;
}
</style>
